<template>
    <div class="container-content">
        <el-form
            ref="elForm"
            :model="formData"
            :rules="rules"
            size="medium"
            label-width="100px"
        >
            <el-collapse v-model="activeName" @change="handleClick">
                <el-collapse-item title="基础" name="basic">
                    <el-form-item label="直接汇率" prop="directRate">
                        <el-input
                            v-model="formData.directRate"
                            placeholder="请输入直接汇率"
                            clearable
                            :style="{ width: '100%' }"
                            @change="caculateNum"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="间接汇率" prop="indirectRate">
                        <el-input
                            v-model="formData.indirectRate"
                            placeholder="请输入间接汇率"
                            clearable
                            disabled
                            :style="{ width: '100%' }"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="生效日期" prop="effectiveTime">
                        <el-date-picker
                            v-model="formData.effectiveTime"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            :style="{ width: '100%' }"
                            placeholder="请选择生效日期"
                            clearable
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="失效日期" prop="invalidTime">
                        <el-date-picker
                            v-model="formData.invalidTime"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            :style="{ width: '100%' }"
                            placeholder="请选择失效日期"
                            clearable
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="汇率类型" prop="rateType">
                        <el-input
                            v-model="formData.rateType"
                            placeholder="请选择汇率类型"
                            clearable
                            :style="{ width: '100%' }"
                        >
                            <i
                                slot="suffix"
                                class="el-input__icon el-icon-notebook-2"
                                style="cursor: pointer"
                                @click="showDialog('rateType')"
                            ></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="原币别" prop="sourceCurrencyName">
                        <el-input
                            v-model="formData.sourceCurrencyName"
                            placeholder="请选择原币别"
                            clearable
                            :style="{ width: '100%' }"
                        >
                            <i
                                slot="suffix"
                                class="el-input__icon el-icon-notebook-2"
                                style="cursor: pointer"
                                @click="showDialog('sourceCurrency')"
                            ></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="目标币别" prop="targetCurrencyName">
                        <el-input
                            v-model="formData.targetCurrencyName"
                            placeholder="请选择目标币别"
                            clearable
                            :style="{ width: '100%' }"
                        >
                            <i
                                slot="suffix"
                                class="el-input__icon el-icon-notebook-2"
                                style="cursor: pointer"
                                @click="showDialog('targetCurrency')"
                            ></i>
                        </el-input>
                    </el-form-item>
                </el-collapse-item>
            </el-collapse>
        </el-form>
        <el-dialog
            :title="dialogTitle"
            :visible.sync="open"
            append-to-body
            width="70%"
        >
            <!-- 原币别、目标币别 -->
            <el-table
                v-if="
                    dialogType === 'sourceCurrency' ||
                    dialogType === 'targetCurrency'
                "
                ref="tableRef"
                :data="tableData"
                stripe
                style="width: 100%"
                @selection-change="handleSelectionChange"
            >
                <el-table-column
                    type="selection"
                    width="55"
                    align="center"
                ></el-table-column>
                <el-table-column
                    type="index"
                    width="55"
                    align="center"
                    label="序号"
                ></el-table-column>
                <el-table-column prop="currencyName" label="币别名称">
                    <template slot-scope="scope">{{
                        scope.row.currencyName || "--"
                    }}</template>
                </el-table-column>
                <el-table-column prop="currencySymbol" label="货币代码"
                    ><template slot-scope="scope">{{
                        scope.row.currencySymbol || "--"
                    }}</template></el-table-column
                >
                <el-table-column prop="code" label="币别编码">
                    <template slot-scope="scope">{{
                        scope.row.code || "--"
                    }}</template></el-table-column
                >
                <el-table-column prop="amountAccuracy" label="金额精度"
                    ><template slot-scope="scope">{{
                        scope.row.amountAccuracy || "--"
                    }}</template></el-table-column
                >
                <el-table-column prop="dataStatus" label="数据状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.dataStatus === 1">创建</el-tag>
                        <el-tag v-else-if="scope.row.dataStatus === 2"
                            >审核中</el-tag
                        >
                        <el-tag v-else-if="scope.row.dataStatus === 3"
                            >已审核</el-tag
                        >
                        <span v-else>--</span>
                    </template>
                </el-table-column>
                <el-table-column prop="isDisabled" label="是否禁用">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.isDisabled === 1" type="danger"
                            >是</el-tag
                        >
                        <el-tag
                            v-else-if="scope.row.isDisabled === 2"
                            type="success"
                            >否</el-tag
                        >
                        <span v-else>--</span>
                    </template>
                </el-table-column>
                <el-table-column prop="priceAccuracy" label="单价精度"
                    ><template slot-scope="scope">{{
                        scope.row.priceAccuracy || "--"
                    }}</template></el-table-column
                >
                <el-table-column prop="showFlag" label="单据显示货币符号">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.showFlag === 1" type="success"
                            >是</el-tag
                        >
                        <el-tag
                            v-else-if="scope.row.showFlag === 2"
                            type="danger"
                            >否</el-tag
                        >
                        <span v-else>--</span>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 汇率类型 -->
            <el-table
                v-if="dialogType === 'rateType'"
                ref="tableRef"
                :data="tableData"
                stripe
                style="width: 100%"
                @selection-change="handleSelectionChange"
            >
                <el-table-column
                    type="selection"
                    width="55"
                    align="center"
                ></el-table-column>
                <el-table-column
                    type="index"
                    width="55"
                    align="center"
                    label="序号"
                ></el-table-column>
                <el-table-column prop="code" label="编码">
                    <template slot-scope="scope">{{
                        scope.row.code || "--"
                    }}</template>
                </el-table-column>
                <el-table-column prop="name" label="名称">
                    <template slot-scope="scope">{{
                        scope.row.name || "--"
                    }}</template>
                </el-table-column>
                <el-table-column prop="directRateAccuracy" label="直接汇率精度">
                    <template slot-scope="scope">{{
                        scope.row.directRateAccuracy || "--"
                    }}</template>
                </el-table-column>
                <el-table-column
                    prop="indirectRateAccuracy"
                    label="间接汇率精度"
                >
                    <template slot-scope="scope">{{
                        scope.row.indirectRateAccuracy || "--"
                    }}</template>
                </el-table-column>
                <el-table-column prop="isSystem" label="是否系统预设">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.isSystem === 1" type="success"
                            >是</el-tag
                        >
                        <el-tag
                            v-else-if="scope.row.isSystem === 2"
                            type="danger"
                            >否</el-tag
                        >
                        <span v-else>--</span>
                    </template>
                </el-table-column>
                <el-table-column prop="describe" label="描述">
                    <template slot-scope="scope">{{
                        scope.row.describe || "--"
                    }}</template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelSelect">取 消</el-button>
                <el-button type="primary" @click="confirmSelect"
                    >确 定</el-button
                >
            </span>
            <el-pagination
                class="pagination mt20"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                :page-sizes="[10, 15, 20, 30]"
            >
            </el-pagination>
        </el-dialog>
    </div>
</template>
<script>
import { add, getCurrencyData, getExchangeTypeData } from "@/api/base/data";
import { editKingBaseRateList, updataKingBaseRateList } from "@/api/bim/outher";
export default {
    components: {},
    props: ["id"],
    data() {
        return {
            flag:false,
            activeName: "basic",
            dialogTitle: "",
            dialogType: "",
            open: false,
            selectItem: [],
            total: 0,
            pageSize: 10,
            currentPage: 1,
            tableData: [],
            formData: {
                directRate: undefined,
                indirectRate: undefined,
                effectiveTime: null,
                invalidTime: null,
                rateType: undefined,
                sourceCurrency: undefined,
                targetCurrency: undefined,
                sourceCurrencyName: "",
                targetCurrencyName: "",
            },
            rules: {
                effectiveTime: [
                    {
                        required: true,
                        message: "请选择生效日期",
                        trigger: "change",
                    },
                ],
                invalidTime: [
                    {
                        required: true,
                        message: "请选择失效日期",
                        trigger: "change",
                    },
                ],
                rateType: [
                    {
                        required: true,
                        message: "请选择汇率类型",
                        trigger: "change",
                    },
                ],
                sourceCurrencyName: [
                    {
                        required: true,
                        message: "请输入原币别",
                        trigger: "blur",
                    },
                ],
                targetCurrencyName: [
                    {
                        required: true,
                        message: "请输入目标币别",
                        trigger: "blur",
                    },
                ],
            },
            rateTypeOptions: [
                {
                    label: "选项一",
                    value: 1,
                },
                {
                    label: "选项二",
                    value: 2,
                },
            ],
        };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
        if (this.id!='') {
            updataKingBaseRateList(this.id).then(res=>{
                this.formData=res.data
                this.flag=true
            })
        }
    },
    methods: {
        handleClick() {},
        submitForm(cb) {
            if (this.flag) {
                this.$refs["elForm"].validate((valid) => {
                if (!valid) return;
                // TODO 提交表单
                editKingBaseRateList(this.formData, "KingBaseRate").then((res) => {
                    if (res.code === 200) {
                        cb();
                        this.$message.success("修改成功");
                         this.flag=false
                    }
                });
            });
            }else{
this.$refs["elForm"].validate((valid) => {
                if (!valid) return;
                // TODO 提交表单
                add(this.formData, "KingBaseRate").then((res) => {
                    if (res.code === 200) {
                        cb();
                        this.$message.success("新增成功");
                    }
                });
            });
            }
            
        },

        resetForm() {
            this.$refs["elForm"].resetFields();
        },
        showDialog(type, index) {
            this.dialogType = type;

            const nameMap = {
                sourceCurrency: () => {
                    this.getCurrency();
                },
                targetCurrency: () => {
                    this.getCurrency();
                },
                rateType: () => {
                    this.getRateType();
                },
            };
            nameMap[this.dialogType] ? nameMap[this.dialogType]() : "";
        },
        getCurrency() {
            this.dialogTitle = "选择币别";
            this.open = true;
            let pageSize = this.pageSize;
            let pageNo = this.currentPage;
            getCurrencyData({ pageSize, pageNo }).then((res) => {
                this.tableData = res.rows;
                this.total = res.total;
            });
        },
        getRateType() {
            this.dialogTitle = "选择汇率类型";
            this.open = true;
            getExchangeTypeData().then((res) => {
                this.tableData = res.rows;
                this.total = res.total;
            });
        },
        handleSelectionChange(val) {
            this.selectItem = val;
        },
        cancelSelect() {
            (this.selectItem = []), (this.open = false);
        },
        confirmSelect() {
            if (this.selectItem.length !== 1) {
                this.$message.error("请选择一条数据");
                return;
            }
            const nameMap = {
                sourceCurrency: () => {
                    this.formData.sourceCurrency = this.selectItem[0].code;
                    this.formData.sourceCurrencyName =
                        this.selectItem[0].currencyName;
                },
                targetCurrency: () => {
                    this.formData.targetCurrency = this.selectItem[0].code;
                    this.formData.targetCurrencyName =
                        this.selectItem[0].currencyName;
                },
            };
            nameMap[this.dialogType] ? nameMap[this.dialogType]() : "";
            this.open = false;
        },
        handleSizeChange(val) {
            this.pageSize = val;
            const nameMap = {
                sourceCurrency: () => {
                    this.getCurrency();
                },
                targetCurrency: () => {
                    this.getCurrency();
                },
                rateType: () => {
                    this.getRateType();
                },
            };
            nameMap[this.dialogType] ? nameMap[this.dialogType]() : "";
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            const nameMap = {
                sourceCurrency: () => {
                    this.getCurrency();
                },
                targetCurrency: () => {
                    this.getCurrency();
                },
                rateType: () => {
                    this.getRateType();
                },
            };
            nameMap[this.dialogType] ? nameMap[this.dialogType]() : "";
        },
        caculateNum() {
            this.formData.indirectRate = (1 / this.formData.directRate).toFixed(
                4
            );
        },
    },
};
</script>
<style></style>
